<div class="flex-header">
  <div class="header-item">任务号：{{ _pipe.taskCode }}</div>
  <div class="header-item">图号：{{ _pipe.drawingCode }}</div>
  <div class="header-item">任务名称：{{ _pipe.taskName }}</div>
  <div class="header-item">数量：{{ _pipe.amountPlanned }}</div>
  <div class="header-item">
    完成时间：{{ _pipe.dueDatePlanned | momentFormat: "YYYY-MM-DD" }}
  </div>
</div>

<div class="flex">
  <div class="prev">
    <a
      href="javascript:;"
      (click)="onPrevClick($event)"
      [hidden]="firstIdx <= 1"
    >
      <i class="fa fa-chevron-left"></i>
    </a>
  </div>

  <div class="flex-pipe timeline">
    <div *ngFor="let component of currentComponents">
      <div style="width: 100%; text-align: center; margin-top: 10px">
        <div
          class="tflex-component"
          [ngClass]="{
            'tcomponent-active':
              component.isCurrent && pipe?.statusName !== '完成',
            'tfinish-component':
              component.seq < currentComponentIdx ||
              pipe?.statusName === '完成',
            'unfinish-component': component.seq > currentComponentIdx
          }"
          style="
            height: 25px;
            max-width: 25px;
            min-width: 25px;
            border-radius: 50%;
            margin-left: 38%;
          "
        >
          <div class="component-context">
            <div class="component__title"></div>
          </div>
        </div>
        <div
          class="component-context"
          style="font-weight: 600; margin-top: 10px"
        >
          <div class="component__title">
            <font> {{ component.actName }} </font>
          </div>
          <div class="component__title">
            <font>
              {{ component.createTime | momentFormat: "YYYY-MM-DD" }}
            </font>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="next">
    <a
      href="javascript:;"
      (click)="onNextClick($event)"
      [hidden]="lastIdx >= length"
    >
      <i class="fa fa-chevron-right"></i>
    </a>
  </div>

  <warningTimeModal #warningTimeModal></warningTimeModal>
</div>
